<template>
    <div class="user-container">
        <div class="query-form">
            <el-form :inline="true" :model="queryForm" ref="queryFormRef">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="queryForm.roleName" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryHandler">查询</el-button>
                    <el-button type="primary" plain @click="resetQueryHandler(queryFormRef)" >重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="base-table">
            <div class="action">
                <el-button type="primary" @click="addHandler">新增</el-button>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%"
            >
                <el-table-column
                        :prop="item.prop"
                        :label="item.label"
                        :width="item.width"
                        :formatter="item.formatter"
                        v-for="(item, index) in columns"
                        :key="item.prop"/>
                <el-table-column fixed="right" label="操作" width="240">
                    <template #default="scope">
                        <el-button type="default" size="small" @click="editHandler(scope.row)"
                        >编辑</el-button>
                        <el-button type="primary" size="small" @click="authHandler(scope.row)"
                        >权限</el-button>
                        <el-popconfirm title="确定删除吗?" @confirm="deleteHandler(scope.row)">
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :total="pager.total"
                        @current-change="pageChangeHandler"
                />
            </div>
        </div>
        <role-dialog
                v-model:visible="dialogFlag"
                :role="roleItem"
                :mode="dialogMode"
                @submit="getTableList"
        >
        </role-dialog>
        <role-draw
                :role="roleItem"
                v-model:dVisible="drawFlag"
                @success="getTableList"
        >
        </role-draw>

    </div>
</template>

<script setup name="RoleView">
   import dayjs from 'dayjs'
   import RoleDialog from './dialogs/RoleDialog.vue'
   import RoleDraw from './draw/RoleDraw.vue'

   console.log(RoleDialog)
   const { proxy } = getCurrentInstance()
   // 查询部分
   const queryForm = reactive({
       roleName: ''
   })
   const queryFormRef = ref()
   const queryOptions = ref([
       {value: 0, label: '所有'},
       {value: 1, label: '在职'},
       {value: 2, label: '离职'},
       {value: 3, label: '试用期'}
   ])
    function queryHandler() {
       getUserList()
    }
   function resetQueryHandler(formEl) {
       if (!formEl) return
       formEl.resetFields()
   }
   onBeforeMount(() =>{
       getMenuList()
   })
   onMounted(() => {
       getTableList()
   })
   // Table部分
    const dialogFlag = ref(false)
    const drawFlag = ref(false)
    const tableData = ref([])
    const columns = ref([
        {prop: 'roleName', label: '角色名称'},
        {prop: 'remark', label: '备注'},
        {prop: 'permissionList', label: '权限列表', formatter: (row, column, value) =>{
                // console.log(value.halfCheckedKeys)
                // console.log(actionMap.value)
                let names = []
                let list = value.halfCheckedKeys || []
                list.map(key => {
                    if (key) names.push(actionMap.value[key])
                })
                // console.log(names)
                return names.filter(item => item).join('，')


         }},
        {prop: 'createTime', label: '创建时间', formatter:(row, column, value)=>{
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
        }}
    ])
    const pager = ref({
        pageNum: 1,
        pageSize: 10,
        total: 0
    })
    const roleItem = ref({})
    const dialogMode = ref()
    const actionMap = ref({})
    const getTableList = async () => {
        // console.log('list')
        const params = {
            ...queryForm,
            ...pager.value
        }
        const result = await proxy.$api.getRoleList(params)
        // console.log(result)
        pager.value = result.page
        tableData.value = result.list
    }
    const  addHandler = () => {
        dialogMode.value = 1
        roleItem.value = {}
        dialogFlag.value = true
    }
    const editHandler = (item) => {
        dialogMode.value = 2
        roleItem.value = item
        dialogFlag.value = true
    }

    const authHandler = (item) => {
        roleItem.value = item
        drawFlag.value = true
    }

    const pageChangeHandler = (page) => {
        pager.value.pageNum = page
        getTableList()
    }
    // 单独删除
    const deleteHandler = async (row) => {
        // console.log(row)
        await proxy.$api.roleDelete({id: [row._id]})
        proxy.$message.success('删除成功')
        getTableList()
        // if (res.nModified > 0) {
        //
        // }
    }
   const getMenuList = async () => {
       const menuList = await proxy.$api.getMenuList()
       getActionMap(menuList)
   }
    const getActionMap = (list) => {
       let map = {}
       const deep = (arr) =>{
           while (arr.length) {
               let item = arr.pop()
               if (item.children && item.action) {
                   map[item._id] = item.menuName
               }
               if (item.children && !item.action) {
                   deep(item.children)
               }
           }
       }
       deep([...list])
        actionMap.value = map
        // console.log(actionMap.value)
    }
</script>
<style scoped lang="scss">
.user-container{

}
</style>
